<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全部订单</title>
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/index/order/order_full.css" />
</head>

<body style="cursor: pointer;">
    <div class="aui-tab" id="order_status_tab">
        <div class="aui-tab-item aui-active">全部</div>
        <div class="aui-tab-item">待出行</div>
        <div class="aui-tab-item">待支付</div>
        <div class="aui-tab-item">退款单</div>
    </div>
    <div id='order_list'>
        <ul class="lists order">
            <!-- 机票 -->
            <li>
                <p><i class="icon iconfont icon-feiji5 plane"></i><span>机票</span><e class='wait'>待支付</e></p>
                <div>
                    <p><span>太原 <i class="icon iconfont icon-qucheng"></i> 北京</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>深航ZH1145</span>
                        <span>实际乘坐</span>
                        <span>CA1145</span>
                    </p>
                </div>
                <p class="payment"><span type="button" class="aui-btn">立即支付</span></p>
            </li>
            <li>
                <p><i class="icon iconfont icon-feiji5 plane"></i><span>机票</span><e class='complete'>已出票</e></p>
                <div>
                    <p><span>太原 <i class="icon iconfont icon-qucheng"></i> 北京</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>深航ZH1145</span>
                        <span>实际乘坐</span>
                        <span>CA1145</span>
                    </p>
                </div>
            </li>
            <li class='cancel'>
                <p><i class="icon iconfont icon-feiji5 plane"></i><span>机票</span><e class='cancel'>已取消</e></p>
                <div>
                    <p><span>太原 <i class="icon iconfont icon-qucheng"></i> 北京</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>深航ZH1145</span>
                        <span>实际乘坐</span>
                        <span>CA1145</span>
                    </p>
                </div>
            </li>
            <!-- 火车票 -->
            <li>
                <p><i class="icon iconfont icon-huoche3 train"></i><span>火车票</span><e class='wait'>待支付</e></p>
                <div>
                    <p><span>太原 <i class="icon iconfont icon-qucheng"></i> 北京</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>车次</span>
                        <span>G169</span>
                    </p>
                </div>
                <p class="payment"><span type="button" class="aui-btn">立即支付</span></p>
            </li>
            <li>
                <p><i class="icon iconfont icon-huoche3 train"></i><span>火车票</span><e class='complete'>已出票</e></p>
                <div>
                    <p><span>太原 <i class="icon iconfont icon-qucheng"></i> 北京</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>车次</span>
                        <span>G169</span>
                    </p>
                </div>
            </li>
            <li class='cancel'>
                <p><i class="icon iconfont icon-huoche3 train"></i><span>火车票</span><e class='cancel'>已取消</e></p>
                <div>
                    <p><span>太原 <i class="icon iconfont icon-qucheng"></i> 北京</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>车次</span>
                        <span>G169</span>
                    </p>
                </div>
            </li>
            <!-- 酒店 -->
            <li>
                <p><i class="icon iconfont icon-jiudian2 hotel"></i><span>酒店</span><e class='wait'>待支付</e></p>
                <div>
                    <p><span>太原湖滨国际大酒店（山西国际会议中心）</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>一晚</span>
                        <span>一间</span>
                        <span>高级客房</span>
                    </p>
                </div>
                <p class="payment"><span type="button" class="aui-btn">立即支付</span></p>
            </li>
            <li>
                <p><i class="icon iconfont icon-jiudian2 hotel"></i><span>酒店</span><e class='complete'>已离店</e></p>
                <div>
                    <p><span>太原湖滨国际大酒店（山西国际会议中心）</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>一晚</span>
                        <span>一间</span>
                        <span>高级客房</span>
                    </p>
                </div>
            </li>
            <li class='cancel'>
                <p><i class="icon iconfont icon-jiudian2 hotel"></i><span>酒店</span><e class='cancel'>已取消</e></p>
                <div>
                    <p><span>太原湖滨国际大酒店（山西国际会议中心）</span><e>￥295</e></p>
                    <p class="travel_time">2018-10-24 04:00-06:30</p>
                    <p class="model">
                        <span>一晚</span>
                        <span>一间</span>
                        <span>高级客房</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-tab.js" ></script>
<script type="text/javascript">
    $('#order_list').css('height',$(window).height()-$('#order_status_tab').height());
    var urls = '';
    var order_status = 1;
    getOrders(urls);
    //订单状态Tab选项卡
    var tab = new auiTab({
        element:document.getElementById("order_status_tab"),
        index:1,
        repeatClick:false
    },function(ret){
        console.log(ret);
        if(ret.index === 1) {
            urls = '';
        } else if (ret.index === 2) {
            urls = '';
        } else if (ret.index === 3) {
            urls = '';
        } else if (ret.index === 4) {
            urls = '';
        }
        order_status = ret.index;
        getOrders(urls);
    });


    //获取订单列表
    function getOrders(urls){
        $.ajax({
            type: 'POST',
            url: urls,
            dataType: 'json',
            data: {},
            success: function(ret){
                if (ret.code == 0) {
                    $('#order_list').html();
                }
            },
            error: function(ret){

            }
        });
    }
    //查看订单跳转页面
    function check_order() {
        openWin("order_list_win", "../../my/order/list_win.html");
    }
</script>
</html>
